<template>
  <div class="search spage">
    <myhead title="搜索电影" :back="true" :search="true"> </myhead>
    <div class="search-box">
        <van-search v-model="keyword" show-action placeholder="请输入影院名称" @cancel="cancel" @search="search"/>
        <div class="nears" v-if="toggle">
            <p class="title">离你最近</p>
            <div class="near-box">
                <router-link v-for="(l,i) in nears" :key="i" :to="{ name:'cinema-detail',params:{
                   cinemaId:l.cinemaId,
                }}">
                    {{l.name}}
                </router-link>
            </div>
        </div>
        <clist :cinemas="list" v-else ></clist>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      keyword:"",
      list:[],
      nears:[],
      toggle:true ,  // 离你最近 
    }
  },
  methods:{
    cancel(){
       this.list = [];
       this.toggle = true; 
    },
    search(value){
      console.log(value)
      this.toggle = false;
      this.list = this.cinemaList.filter(item=>(item.name.indexOf(value)!=-1)||(item.address.indexOf(value)!=-1))
    }
  },
  mounted(){

    if(this.city){
          // 获取所有的电影院 
          this.$ajax.getMaiZuo({
            cityId: this.city.cityId,
          },{
            'X-Host': 'mall.film-ticket.cinema.list',
          })
          .then(res=>{
            console.log(res)
            this.changeCinemaList(res.data.cinemas);
            
          })
          // 离你最近   
          this.$ajax.getMaiZuo({
            cityId: this.city.cityId,
          },{
            'X-Host': 'mall.film-ticket.cinema.recommend',
          })
          .then(res=>{
            this.nears = res.data.cinemas;
          })

      }else{
        // 必须要去选择城市 
        this.$dialog.alert({
          title: '城市选择',
          message: '你尚未选择城市或者城市定位,请去选择',
        }).then(() => {
          // on close
          this.$router.push({name:"city"})
        });
      }
    }
}
</script>

<style lang="scss" scoped>
.nears{
  padding:10px;
  border-bottom:0.5px solid #ddd;
  .title{
        font-size: 13px;
      line-height: 13px;
      color: #bdc0c5;
      margin: 18px 0;
  }
  .near-box{
    display: flex;
    flex-wrap: wrap;
    a{
      height: 30px;
      background-color: hsla(0,0%,95.7%,.6);
      line-height: 14px;
      border-radius: 3px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 13px;
      padding: 8px 12px;
      flex-shrink: 0;
      text-decoration: none;
      margin:10px 5px;
    }
  }
}
</style>
